<div [@routerTransition]>
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title">
                    <span>工具室领用信息查询</span>
                </h3>
            </div>
            <div class="col text-right mt-3 mt-md-0"></div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                    <form class="horizontal-form" autocomplete="off">
                        <div class="m-form m-form--label-align-right">
                            <div class="row">
                                        
                                        
                                        <div style="width: 383px">
                                            <div class="form-group m-form__group m-form__group--sm row">
                                                <label class="col-2 col-form-label" for="StartEndRange">过账时间:</label>
                                                <div class="col-10">
                                                    <date-month-day-range [(dateRange)]="dateRange"></date-month-day-range>
                                                </div>
                                            </div>
                                        </div>
                                        
                                    
                                
                                
                                <div class="col-md-1 m--align-right">
                                    <button (click)="getBillItems()" class="btn btn-primary m--margin-10" type="submit">
                                        <i class="flaticon-search-1" [attr.aria-label]="l('Search')"></i>查询
                                    </button>
                                </div>
                            </div>
                            <div class="row" [hidden]="!advancedFiltersAreShown">
                                    <div class="input-width">
                                            <div class="form-group m-form__group m-form__group--sm row">
                                                <label class="col-4 col-form-label " for="f_BillCode">单据编号:</label>
                                                <div class="col-8">
                                                    <input
                                                        type="text"
                                                        class="form-control m-input"
                                                        name="f_BillCode"
                                                        id="f_BillCode"
                                                        [(ngModel)]="f_BillCode"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        
                                            <div class="input-width">
                                                <div class="form-group m-form__group row">
                                                    <label class="col-4 col-form-label" for="Search_PlanNumber">计划号:</label>
                                                    <div class="col-8">
                                                        <input type="text" class="form-control m-input" name="Search_PlanNumber"
                                                            id="Search_PlanNumber" [(ngModel)]="PlanNumber" />
                                                    </div>
                                                </div>
                                            </div>
                                        
                                         
                                            <div class="input-width">
                                                <div class="form-group m-form__group row">
                                                    <label class="col-4 col-form-label" for="Search_ContractNumber">合同编号:</label>
                                                    <div class="col-8">
                                                        <input type="text" class="form-control m-input" name="Search_ContractNumber"
                                                            id="Search_ContractNumber" [(ngModel)]="ContractNumber" />
                                                    </div>
                                                </div>
                                            </div>
                                         
                                        <div class="input-width">
                                                <div class="form-group m-form__group m-form__group--sm row">
                                                    <label class="col-4 col-form-label " for="f_Operator">领用人:</label>
                                                    <div class="col-8">
                                                        <input
                                                            type="text"
                                                            class="form-control m-input"
                                                            name="f_Operator"
                                                            id="f_Operator"
                                                            [(ngModel)]="f_Operator"
                                                        />
                                                    </div>
                                                </div>
                                            </div>
                            <div class="input-width">
                                <div class="form-group m-form__group m-form__group--sm row">
                                    <label class="col-4 col-form-label " for="f_MaterialCode">物料编号:</label>
                                    <div class="col-8">
                                        <input
                                            type="text"
                                            class="form-control m-input"
                                            name="f_MaterialCode"
                                            id="f_MaterialCode"
                                            [(ngModel)]="f_MaterialCode"
                                        />
                                    </div>
                                </div>
                            </div>
                            <div class="input-width">
                                <div class="form-group m-form__group m-form__group--sm row">
                                    <label class="col-4 col-form-label" for="f_MaterialName">物料名称:</label>
                                    <div class="col-8">
                                        <input
                                            type="text"
                                            class="form-control m-input"
                                            name="f_MaterialName"
                                            id="f_MaterialName"
                                            [(ngModel)]="f_MaterialName"
                                        />
                                    </div>
                                </div>
                            </div>                                   
                            <div class="input-width">
                                <div class="form-group m-form__group m-form__group--sm row">
                                    <label class="col-4 col-form-label" for="f_TradeMark">品牌:</label>
                                    <div class="col-8">
                                        <input
                                            type="text"
                                            class="form-control m-input"
                                            name="f_TradeMark"
                                            id="f_TradeMark"
                                            [(ngModel)]="f_TradeMark"
                                        />
                                    </div>
                                </div>
                            </div>
                            <div class="input-width">
                                <div class="form-group m-form__group m-form__group--sm row">
                                    <label class="col-4 col-form-label" for="f_Specification">规格:</label>
                                    <div class="col-8">
                                        <input
                                            type="text"
                                            class="form-control m-input"
                                            name="f_Specification"
                                            id="f_Specification"
                                            [(ngModel)]="f_Specification"
                                        />
                                    </div>
                                </div>
                            </div>
                            <div class="input-width">
                                    <div class="form-group m-form__group m-form__group--sm row">
                                        <label class="col-4 col-form-label" for="warehouseNameFilter">仓库:</label>
                                        <div class="col-8">
                                            <camc-multiSelect
                                                class="float-left dropdownlist"
                                                id="warehouseNameFilter"
                                                [options]="roomOption"
                                                name="tabdle"
                                                [(ngModel)]="selectedWareHouse"
                                                styleClass="form-control"
                                                defaultLabel="选择仓库"
                                                maxSelectedLabels="1"
                                                selectedItemsLabel="已选择 {0} 个仓库"
                                            >
                                            </camc-multiSelect>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row margin-bottom-5">
                                    <div class="col-sm-12">
                                        <span
                                            class="clickable-item text-muted"
                                            *ngIf="!advancedFiltersAreShown"
                                            (click)="advancedFiltersAreShown = !advancedFiltersAreShown"
                                            ><i class="fa fa-angle-down"></i> {{ 'ShowAdvancedFilters' | localize }}</span
                                        >
                                        <span
                                            class="clickable-item text-muted"
                                            *ngIf="advancedFiltersAreShown"
                                            (click)="advancedFiltersAreShown = !advancedFiltersAreShown"
                                            ><i class="fa fa-angle-up"></i> {{ 'HideAdvancedFilters' | localize }}</span
                                        >
                                    </div>
                                </div>
                        </div>
                    </form>

                    <hr />                    

                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h4 class="m-subheader__title">领用单详细信息</h4>
                        </div>                       

                        <div class="col-md-12 m--margin-top-20">
                            <p-table #detailDataTable (onLazyLoad)="getBillItems($event)" [value]="detailPrimengTableHelper.records"
                                [rows]="detailPrimengTableHelper.defaultRecordsCountPerPage" [paginator]="false" [lazy]="true"
                                [scrollable]="true" ScrollWidth="100%" [responsive]="detailPrimengTableHelper.isResponsive"
                                [resizableColumns]="detailPrimengTableHelper.resizableColumns" selectionMode="single"
                                [(selection)]="selectedBillItem">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width: 40px">
                                            序号
                                        </th>
                                        <ng-container *ngFor="let ext of detialExtensions">
                                            <th width="{{ ext.width }}">
                                                {{ ext.title }}
                                            </th>
                                        </ng-container>
                                    </tr>
                                </ng-template>

                                <ng-template pTemplate="body" let-record="$implicit" let-i="rowIndex">
                                    <tr [pSelectableRow]="record">
                                        <td style="width: 40px">
                                            {{ i + 1 + detailPaginator.first }}
                                        </td>
                                        <ng-container *ngFor="let ext of detialExtensions">
                                            <ng-container [ngSwitch]="ext.formatType">
                                                <ng-container *ngSwitchCase="1">
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] | number: '1.0-0' }}
                                                    </td>
                                                </ng-container>
                                                <ng-container *ngSwitchCase="2">
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] | number: '1.2-2' }}
                                                    </td>
                                                </ng-container>
                                                <ng-container *ngSwitchCase="4">
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] | momentFormat: 'YYYY-MM-DD' }}
                                                    </td>
                                                </ng-container>
                                                <ng-container *ngSwitchDefault>
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] }}
                                                    </td>
                                                </ng-container>
                                            </ng-container>
                                        </ng-container>
                                    </tr>
                                </ng-template>
                            </p-table>

                            <div class="primeng-no-data" *ngIf="detailPrimengTableHelper.totalRecordsCount == 0">
                                没有数据
                            </div>
                            <div class="primeng-paging-container">
                                <p-paginator [rows]="detailPrimengTableHelper.defaultRecordsCountPerPage"
                                    #detailPaginator (onPageChange)="getBillItems($event)" [totalRecords]="detailPrimengTableHelper.totalRecordsCount"
                                    [rowsPerPageOptions]="detailPrimengTableHelper.predefinedRecordsCountPerPage">
                                </p-paginator>
                                <span class="total-records-count">
                                    {{ 'TotalRecordsCount' | localize: detailPrimengTableHelper.totalRecordsCount }}
                                    合计金额:{{ totalPrice | number: '1.2-2' }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>